import { _decorator, Node, Button } from 'cc';
import { BasePanel } from '../../../../scripts/libs/ui/BasePanel';
import { udm } from '../../../../scripts/managers/UserDataManager';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { gm } from '../../../../scripts/managers/GameManager';
import { ResourceHelper } from '../../ResourceHelper';
import { lm } from '../../LobbyManager';
import { KeyDown } from '../../../../scripts/libs/rxjs/cc3/KeyEvent';
import { KeyCode } from 'cc';
import { PlayfabDebugPanel } from '../PlayfabDebugPanel/PlayfabDebugPanel';
import { find } from 'cc';
import { Label } from 'cc';
import { FlowStatus } from '../../Enums';
// import { ShopPage } from './ShopPage/ShopPage';
import { v3 } from 'cc';
import { Vec3 } from 'cc';
import { LobbySettingPanel } from '../LobbySettingPanel/LobbySettingPanel';
const { ccclass, property } = _decorator;

@ccclass('LobbyPanel')
export class LobbyPanel extends BasePanel {

    @property(Node)
    mainNode: Node = null;

    // @property(PageView)
    // pageView: PageView = null;

    @property(Button)
    startButton: Button = null;

    @property(Button)
    settingButton: Button = null;

    willBind(): void {
        this.adaptive();
    }

    useObserves() {
        return [
            udm.stageNum.subscribe(this.stageNumChanged.bind(this)),

            BindButton(this.startButton).subscribe(this.startButtonClicked.bind(this)),
            BindButton(this.settingButton).subscribe(this.settingButtonClicked.bind(this)),
            KeyDown().subscribe((_: KeyCode) => {
                if (!gm.editEnabled.value) {
                    if (_ == KeyCode.KEY_P) {
                        PlayfabDebugPanel.StartProcess().subscribe();
                    }
                }
            }),
        ];
    }

    adaptive() {
        let scaleV3 = v3(Vec3.ONE).multiplyScalar(lm.getAdaptiveScale());
        this.mainNode.setScale(scaleV3);
    }

    stageNumChanged() {
        // this.startButton.stageId.value = udm.stageNum.value;
        find('Label', this.startButton.node).getComponent(Label).string = `LEVEL ${udm.stageNum.value}`;
    }

    startButtonClicked() {
        lm.customLoadingReasons.add('load_stage');
        lm.lobbySceneCanvas.loadItem().subscribe(_ => {
            ResourceHelper.LoadStageAssets(udm.stageNum.value).subscribe(stageInfo => {
                if (stageInfo != null) {
                    lm.customLoadingReasons.delete('load_stage');
                    if (stageInfo.stageId != null && stageInfo.stageId != udm.stageNum.value) {
                        this.warn('StageId in json is not match with stageId in file name.');
                        return;
                    }
                    stageInfo.stageId = udm.stageNum.value;
                    gm.stageInfo.value = stageInfo;
                    if (gm.editEnabled.value) {
                        lm.flowStatus.value = FlowStatus.EditorGame;
                    } else {
                        lm.flowStatus.value = FlowStatus.Game;
                    }
                } else {
                    lm.customLoadingReasons.delete('load_stage');
                }
            });
        });
    }

    settingButtonClicked() {
        // SettingsPanel.StartProcess().subscribe();
        // FeatureUnlockPanel.StartProcess().subscribe();
        // PausePanel.StartProcess().subscribe();
        LobbySettingPanel.StartProcess().subscribe();
    }

}

